<template>
  <div class="tp-box">
    <a-drawer
      :visible="props.visible"
      :width="props.width"
      :closable="props.closable"
      :destroyOnClose="props.destroyOnClose"
      @close="handleClose"
    >
      <template #title>
        <div class="title-detail" style="float: left">
          <Tooltip placement="top">
            <template #title>
              <span>{{ getTipTitle }}</span>
            </template>
            <h3>{{ getTitle }}</h3>
          </Tooltip>
          <a-space direction="vertical" :size="12">
            <!-- <a-range-picker v-model:value="value4" :format="dateFormat" /> -->
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <!-- <div style="float: right">
          <a-space style="float: right; margin-right: 10px">
            <a-button type="primary" @click="handleExport"> 导出 </a-button>
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
        </div> -->
      </template>

      <!-- :scroll="{ x: 1500, y: 600 }" -->
      <a-table
        :columns="computedTableColumn"
        :data-source="computedTableData"
        :page-size-options="pageSizeOptions"
        :loading="loading"
        bordered
        :pagination="false"
        size="middle"
        :scroll="{ x: 'calc(700px + 50%)', y: props.detailTableHeight }"
      >
        <!-- <template #action>
          <a>action</a>
        </template> -->
      </a-table>
      <div class="pagination">
        <a-pagination
          show-size-changer
          v-model:current="pageIndex"
          v-model:pageSize="pageSize"
          :total="total"
          @show-size-change="onShowSizeChange"
        />
      </div>
    </a-drawer>
    <VillageDetail
      v-model:vvisible="vvisible"
      title="抽屉标题"
      :width="1500"
      :detailTableHeight="detailTableHeight"
      :vclosable="true"
      :vdestroyOnClose="true"
      :data="detailData"
      :vdetailParams="vdetailParams"
      :vcurrentTitle="v_currentTitle"
      @close="handleVillageClose"
    >
      <!-- <p>抽屉内容</p> -->
    </VillageDetail>
    <DetailYhDrawer
      v-model:visible="yhvisible"
      title="抽屉标题"
      :width="1500"
      :yhdetailTableHeight="yhdetailTableHeight"
      :yhclosable="true"
      :yhdestroyOnClose="true"
      :yhdata="yhdetailData"
      :yhdetailParams="yhdetailParams"
      :yhcurrentqx="yhcurrentqx"
      :yhcurrentTitle="yhcurrentTitle"
      @close="handleyhClose"
    >
      <!-- <p>抽屉内容</p> -->
    </DetailYhDrawer>
  </div>
</template>
<script setup lang="ts">
import { Tooltip } from 'ant-design-vue';
import { ref, computed, onMounted, watch } from 'vue';
import { getNineTownDangerList } from '/@/api/demo/system';
import VillageDetail from '../component/detail.vue';
import DetailYhDrawer from '../component/detailYhDrawer.vue';
import { useGlobSetting } from '/@/hooks/setting';
import { useUserStore } from '/@/store/modules/user';
import { downloadByUrl } from '/@/utils/file/download';
const userStore = useUserStore();
const globSetting = useGlobSetting();
// 表格的 ref Dom名称
const visible = ref(false);
const vvisible = ref(false);
let detailData = ref<any[]>([]);
let vdetailParams = ref({}); // 详情参数
let detailTableHeight = ref<number>(0); // 表格高度
let v_currentTitle = ref({});

const yhvisible = ref(false);
let yhdetailData = ref<any[]>([]);
let yhdetailParams = ref({}); // 详情参数
let yhcurrentTitle = ref({});
let yhdetailTableHeight = ref<number>(0); // 表格高度
// 默认传过来的值q
const props = defineProps({
  visible: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: '',
  },
  width: {
    type: Number,
    default: 256,
  },
  detailTableHeight: {
    type: Number,
    default: 600,
  },
  hzfs: {
    type: String,
    default: '',
  },
  closable: {
    type: Boolean,
    default: true,
  },
  data: {
    type: Array,
    default: () => [],
  },
  detailParams: {
    type: Object,
    default: () => {},
  },
  currentXzqdmname: {
    type: String,
    default: '',
  },
  currentTitle: {
    type: String,
    default: '',
  },
  wscolsList: {
    type: Array,
    default: () => [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
  },
  destroyOnClose: {
    type: Boolean,
    default: true,
  },
  onClose: {
    type: Function as PropType<() => void>,
    default: () => {},
  },
});
let pageIndex = ref(1);
let pageSize = ref(100);
let loading = ref(false);
const pageSizeOptions = ref<string[]>(['100', '200', '300']);
let tableSource = ref<any>([]);
let total = ref(0);
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 80,
  },
  {
    title: '乡镇名称',
    dataIndex: 'town',
    key: 'town',
    align: 'center',
    width: 100,
    customCell: (row, index, column) => {
      let isNoHzyh = row.town !== '汇总' ? true : false;
      let style = 'cursor:pointer;text-decoration: underline; color: blue;';
      let isNoZero = row[column.key] !== 0 ? true : false;
      return {
        style: `${isNoHzyh === true && isNoZero ? style : ''}`,
        class: 'cell-hover',
        onClick: async () => {
          getDetailData(row, index, column, isNoHzyh, isNoZero);
        },
      };
    },
  },
  {
    title: '已核验房屋总数',
    dataIndex: 'cnt',
    key: 'cnt',
    align: 'center',
    width: 120,
  },
  {
    title: '是否满足“双通道”要求',
    children: [
      {
        title: '已满足',
        dataIndex: 'jsrysstd_s',
        key: 'jsrysstd_s',
        width: 100,
        align: 'center',
      },
      {
        title: '未满足',
        dataIndex: 'jsrysstd_f',
        key: 'jsrysstd_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  {
    title: '是否存在彩钢板建筑出租住人',
    children: [
      {
        title: '已存在',
        dataIndex: 'wdwhjgfjgqsyyrkrgbdj_s',
        key: 'wdwhjgfjgqsyyrkrgbdj_s',
        width: 100,
        align: 'center',
      },
      {
        title: '不存在',
        dataIndex: 'wdwhjgfjgqsyyrkrgbdj_f',
        key: 'wdwhjgfjgqsyyrkrgbdj_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  // 居住 商业
  {
    title: '是否存在窗口防护网、广告牌、铁栅栏',
    children: [
      {
        title: '已存在',
        dataIndex: 'sfczckfhwggptzl_s',
        key: 'sfczckfhwggptzl_s',
        width: 100,
        align: 'center',
      },
      {
        title: '不存在',
        dataIndex: 'sfczckfhwggptzl_f',
        key: 'sfczckfhwggptzl_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  // 居住 商业
  {
    title: '电动自行车及蓄电池是否在室内停放充电',
    children: [
      {
        title: '是',
        dataIndex: 'use_electric_bicycle_s',
        key: 'use_electric_bicycle_s',
        width: 100,
        align: 'center',
      },
      {
        title: '否',
        dataIndex: 'use_electric_bicycle_f',
        key: 'use_electric_bicycle_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  //  商业
  {
    title: '服务于房屋的电动自行车充电设施是否按要求建设',
    children: [
      {
        title: '是',
        dataIndex: 'fwyfwdddzxccdsssfayqjshsf_s',
        key: 'fwyfwdddzxccdsssfayqjshsf_s',
        width: 100,
        align: 'center',
      },
      {
        title: '否',
        dataIndex: 'fwyfwdddzxccdsssfayqjshsf_f',
        key: 'fwyfwdddzxccdsssfayqjshsf_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  {
    title: '是否违规使用液化石油气瓶',
    children: [
      {
        title: '是',
        dataIndex: 'use_bottled_liquefied_gas_s',
        key: 'use_bottled_liquefied_gas_s',
        width: 100,
        align: 'center',
      },
      {
        title: '否',
        dataIndex: 'use_bottled_liquefied_gas_f',
        key: 'use_bottled_liquefied_gas_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  {
    title: '疏散通道是否堆放杂物',
    children: [
      {
        title: '是',
        dataIndex: 'use_stacked_items_s',
        key: 'use_stacked_items_s',
        width: 100,
        align: 'center',
      },
      {
        title: '否',
        dataIndex: 'use_stacked_items_f',
        key: 'use_stacked_items_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  {
    title: '是否私拉乱接电线',
    children: [
      {
        title: '是',
        dataIndex: 'slljdx_s',
        key: 'slljdx_s',
        width: 100,
        align: 'center',
      },
      {
        title: '否',
        dataIndex: 'slljdx_f',
        key: 'slljdx_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  {
    title: '其他高风险火灾隐患问题',
    children: [
      {
        title: '是',
        dataIndex: 'notes_s',
        key: 'notes_s',
        width: 100,
        align: 'center',
      },
      {
        title: '否',
        dataIndex: 'notes_f',
        key: 'notes_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
];
// 计算总数的方法
function vtotal(arr: any, item: any) {
  let total = arr.reduce((pre: any, cur: any) => {
    return parseInt(pre) + parseInt(cur[item]);
  }, 0);
  return total;
}
// 计算属性，用于实时更新数据到页面上
const computedTableColumn = computed(() => {
  let newColumn: any = [];
  newColumn = columns;
  return newColumn;
});
const computedTableData = computed(() => {
  console.log(tableSource.value);
  return tableSource.value;
});
const getTitle = computed(() => {
  // let str = `【${props.currentXzqdmname} 】-- ${props.currentTitle}`;
  let str = `【${props.currentTitle}】的核验统计`;
  if (str.length > 50) {
    str = str.substring(0, 50) + '...';
  }
  return str;
});
const getTipTitle = computed(() => {
  let str = `${props.currentTitle}`;
  return str;
});
watch(
  () => props.visible,
  (newVal, oldVal) => {
    // console.log(`visible 变化了，新值：${newVal}，旧值：${oldVal}`);
    // 在这里执行你需要的操作
    if (newVal) {
      getTableData();
    }
  },
);
const getTableData = async () => {
  let params: any = {
    pageindex: pageIndex.value,
    pagesize: pageSize.value,
    ...props.detailParams,
  };
  loading.value = true;
  let res = await getNineTownDangerList(params);
  loading.value = false;

  let cnt = vtotal(res.items, 'cnt');

  let jsrysstd_s = vtotal(res.items, 'jsrysstd_s');
  let jsrysstd_f = vtotal(res.items, 'jsrysstd_f');
  let wdwhjgfjgqsyyrkrgbdj_s = vtotal(res.items, 'wdwhjgfjgqsyyrkrgbdj_s');
  let index_count = res.items.length + 1;
  let wdwhjgfjgqsyyrkrgbdj_f = vtotal(res.items, 'wdwhjgfjgqsyyrkrgbdj_f');
  let sfczckfhwggptzl_s = vtotal(res.items, 'sfczckfhwggptzl_s');
  let sfczckfhwggptzl_f = vtotal(res.items, 'sfczckfhwggptzl_f');
  let use_electric_bicycle_s = vtotal(res.items, 'use_electric_bicycle_s');

  let use_electric_bicycle_f = vtotal(res.items, 'use_electric_bicycle_f');
  let fwyfwdddzxccdsssfayqjshsf_s = vtotal(res.items, 'fwyfwdddzxccdsssfayqjshsf_s');
  let fwyfwdddzxccdsssfayqjshsf_f = vtotal(res.items, 'fwyfwdddzxccdsssfayqjshsf_f');
  let use_bottled_liquefied_gas_s = vtotal(res.items, 'use_bottled_liquefied_gas_s');
  let use_bottled_liquefied_gas_f = vtotal(res.items, 'use_bottled_liquefied_gas_f');
  let use_stacked_items_s = vtotal(res.items, 'use_stacked_items_s');
  let use_stacked_items_f = vtotal(res.items, 'use_stacked_items_f');

  let slljdx_s = vtotal(res.items, 'slljdx_s');
  let slljdx_f = vtotal(res.items, 'slljdx_f');
  let notes_s = vtotal(res.items, 'notes_s');
  let notes_f = vtotal(res.items, 'notes_f');
  console.log("FFF")
  let tallObj = {
    town: '汇总',
    cnt: cnt,
    jsrysstd_s: jsrysstd_s,
    jsrysstd_f: jsrysstd_f,
    wdwhjgfjgqsyyrkrgbdj_s: wdwhjgfjgqsyyrkrgbdj_s,
    wdwhjgfjgqsyyrkrgbdj_f: wdwhjgfjgqsyyrkrgbdj_f,
    sfczckfhwggptzl_s: sfczckfhwggptzl_s,
    index: index_count,
    sfczckfhwggptzl_f: sfczckfhwggptzl_f,
    use_electric_bicycle_s: use_electric_bicycle_s,
    use_electric_bicycle_f: use_electric_bicycle_f,
    fwyfwdddzxccdsssfayqjshsf_s: fwyfwdddzxccdsssfayqjshsf_s,
    fwyfwdddzxccdsssfayqjshsf_f: fwyfwdddzxccdsssfayqjshsf_f,
    use_bottled_liquefied_gas_s: use_bottled_liquefied_gas_s,
    use_bottled_liquefied_gas_f: use_bottled_liquefied_gas_f,
    use_stacked_items_s: use_stacked_items_s,
    use_stacked_items_f: use_stacked_items_f,
    slljdx_s: slljdx_s,
    slljdx_f: slljdx_f,
    notes_s: notes_s,
    notes_f: notes_f,
  };

  let list = res.items;
  tableSource.value = list;
  tableSource.value.push(tallObj);
  total.value = res.total;

  // console.log('@resqqq', list);
};
//  调用 父组件传过来的方法
const emit = defineEmits(['close']);
// 导出
const getDetailData = async (
  row: any,
  index: number,
  column: any,
  isNoHzyh: boolean,
  isNoZero: boolean,
) => {
  if (isNoHzyh && isNoZero) {
    let params: any = {
      towndm: row.towndm,
      ...props.detailParams,
    };
    vdetailParams.value = params;
    let current: any = {
      title: row.town,
      xzq: row.xzq,
    };
    v_currentTitle.value = current;
    showDrawer();
  }
};
const getDetailYhData = async (
  row: any,
  index: number,
  column: any,
  isNoHzyh: boolean,
  isNoZero: boolean,
  check_id: string,
  check_name: string,
  type: string,
) => {
  if (isNoHzyh && isNoZero) {
    let params: iParams = {
      check_id: check_id,
      xzqdm: row.xzqdm,
      towndm: row.towndm,
      type: type,
    };
    yhdetailParams.value = params;
    console.log('参数：', yhdetailParams.value);
    let current: any = {
      title: check_name,
      type: type,
    };
    yhcurrentTitle.value = current;
    showyhDrawer();
  }
};
function showyhDrawer() {
  yhvisible.value = true;
}
// 打开抽屉
function showDrawer() {
  vvisible.value = true;
}
const handleVillageClose = () => {
  vvisible.value = false;
};
function handleyhClose() {
  yhvisible.value = false;
}
const handleClose = () => {
  emit('close');
  pageIndex.value = 1;
  pageSize.value = 15;
  vvisible.value = false;
};
function handleExport() {
  const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
  const tk = userStore.getToken;
  downloadByUrl({
    url:
      uriBase +
      '/export/static/yhExport?access_token=' +
      tk +
      '&category=zc&levle=town&xzqdm=' +
      props.detailParams.xzqdm,
    target: '_blank',
  });
}
// 切换页码的时候更新  pageIndex 和  pageSize
const onShowSizeChange = (pageIndex: number, pageSize: number) => {
  // antDesign  自动给  pageIndex 和 pageSize 赋值
  // pageIndex.value = pageIndex;
  // pageSize.value = pageSize;
  // console.log('@pageIndex,pageSize', pageIndex, pageSize);
};
watch(pageSize, () => {
  // console.log('pageSize', pageSize.value);
  getTableData();
});
watch(pageIndex, () => {
  // console.log('current', pageIndex.value);
  getTableData();
});
onMounted(() => {
  getTableData();
});
</script>
<style lang="less" scoped>
.tp-box {
  height: 100%;
}
.title-detail {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.pagination {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
}
</style>
